import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;
import { useEffect, useRef, useState } from "react";
import "./index.less"

interface propsType<T = any> {
    data?: T,  // chart 数据
    myOption?: Function, //chart 配置
    width: number | string, // chart 宽度
    height: number | string, // chart 高度
    refResult?: Function, // ChartInstance
    className?: string, // chart 类名
    valueAxis?: Boolean, //value 轴的方向 true 为Y false 为 X
    dbClick?:Function
}

interface itemInfo {
    name: string,
    value: number
}

let ChartInstance: echarts.ECharts;
export default function Echarts(props: propsType) {
    const { data } = props
    const chartRef = useRef<any>(null)
    useEffect(() => {
        ChartInstance = echarts.init(chartRef.current as HTMLDivElement)
        props.refResult && props.refResult(ChartInstance)
        if(props.myOption){
            ChartInstance.setOption(props.myOption(ChartInstance))
        }
    }, [])
    
    function dbEvent(){
        props.dbClick && props.dbClick()
    }

    return (
        <div ref={chartRef} className={`flex_a_j chartBox ${props.className}`} style={{ "width": props.width, "height": props.height }} onDoubleClick={dbEvent}></div>
    )
}